Skip to content

UI CPU clipping implementation supporting rotation and scaling#24148

Open
ickshonpe wants to merge 30 commits into
bevyengine:mainfrom
ickshonpe:overflow-transform
Open

UI CPU clipping implementation supporting rotation and scaling#24148
ickshonpe wants to merge 30 commits into
bevyengine:mainfrom
ickshonpe:overflow-transform

Conversation

@ickshonpe
Copy link
Copy Markdown
Contributor

@ickshonpe ickshonpe commented May 6, 2026

Objective

Get clipping working with transformed nodes.

Fixes #17630
Fixes #21775
(and probably quite a few others)

Solution

CalculatedClip is now an enum with Rects and FullyClipped variants. Rects holds a list of Rect in node local coords and Affine2 world-to-local transform.

bevy_ui_render has a new clipping module with a clip_polygon function that intersects UI elements with the clipping rects and chops off the non-visible regions and returns a list of vertices that forms a triangle fan. Uses a simplified version of the Sutherland–Hodgman algorithm.


  • Performance isn't too bad, but text suffers a bit when clipped as there's no broad phase atm, instead it tests and breaks up each glyph individually. The clipping geometry also needs to be cached somewhere and updated incrementally.

  • I didn't try to optimise this branch too much yet as I suspect the required changes would probably end up being much larger and more complicated than the clipping implementation itself, and it might better to leave them for follow up PRs.

  • Currently this only supports rectangular clipping regions but it can easily be expanded to support any covex shapes.

--

Ideally we'd do clipping on the GPU which would allow for arbitrary clipping geometry and better performance. That would need a complete rewrite of the UI renderer and might have compatibility issues. I think this is good enough as an improving step, it works reliably and the code is also simpler and easier to understand, in particular UV interpolation is much simpler now.

Testing

cargo run --example overflow_transform

Showcase

tu

ickshonpe added 2 commits May 6, 2026 01:15
`CalculatedClip` is now an enum with `Rects` and `FullyClipped` variants. `Rects` holds a list of `Rect` in node local coords and `Affine2` world-to-local transform.

`bevy_ui_render` has a new `clipping` module with a `clip_polygon`  function that intersects UI elements with the clipping rects and chops off the non-visible regions and returns a list of vertices that forms a triangle fan.

New example `overflow_transform`.
@@ -0,0 +1,132 @@
//! Demonstrates nested transformed UI clipping.
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this probably belongs in testbed. It's a great test, but not very educational.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah maybe, I might expand it further though.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

kk! It's also fancy enough that I don't mind it being in the main examples.

Comment thread _release-content/migration-guides/calculated_clip_rects.md Outdated
@ickshonpe ickshonpe changed the title UI clipping with transformed nodes new UI clipping implementation May 6, 2026
@ickshonpe ickshonpe added C-Bug An unexpected or incorrect behavior C-Feature A new feature, making something new possible A-Rendering Drawing game state to the screen A-UI Graphical user interfaces, styles, layouts, and widgets M-Migration-Guide A breaking change to Bevy's public API that needs to be noted in a migration guide M-Release-Note Work that should be called out in the blog due to impact S-Needs-Review Needs reviewer attention (from anyone!) to move forward A-Picking Pointing at and selecting objects of all sorts M-Deliberate-Rendering-Change An intentional change to how tests and examples are rendered labels May 6, 2026
@github-project-automation github-project-automation Bot moved this to Needs SME Triage in Rendering May 6, 2026
@github-project-automation github-project-automation Bot moved this to Needs SME Triage in UI May 6, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 6, 2026

It looks like your PR has been selected for a highlight in the next release blog post, but you didn't provide a release note.

Please review the instructions for writing release notes, then expand or revise the content in the release notes directory to showcase your changes.

Comment thread crates/bevy_ui/src/focus.rs Outdated
Comment thread crates/bevy_ui/src/picking_backend.rs Outdated
Comment thread crates/bevy_ui_render/src/ui_texture_slice_pipeline.rs
Comment thread crates/bevy_ui_render/src/lib.rs Outdated
@ickshonpe ickshonpe changed the title new UI clipping implementation CPU clipping implementation supporting rotation and scaling May 11, 2026
@ickshonpe ickshonpe changed the title CPU clipping implementation supporting rotation and scaling UI CPU clipping implementation supporting rotation and scaling May 11, 2026
ickshonpe added 3 commits May 11, 2026 13:33
…ate function with the value taken from the parley `Layout`, not the caller.

* `TextLayoutInfo::size` should be in physical pixels, like the rest of the layout properties, and, again, set b he text layout update function, not the caller.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-Picking Pointing at and selecting objects of all sorts A-Rendering Drawing game state to the screen A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior C-Feature A new feature, making something new possible M-Deliberate-Rendering-Change An intentional change to how tests and examples are rendered M-Migration-Guide A breaking change to Bevy's public API that needs to be noted in a migration guide M-Release-Note Work that should be called out in the blog due to impact S-Needs-Review Needs reviewer attention (from anyone!) to move forward

Projects

Status: Needs SME Triage
Status: Needs SME Triage

Development

Successfully merging this pull request may close these issues.

Text rendering breaks when UiTransform.scale is increased and overflow is not Visible. UI Clipping scale factor bleed

3 participants